/*浮动动画*/
.floating {
    position: relative;

    transform: translateY(0);
    transition: transform 1s;

    width:100px;
    height:100px;
    background-color: #ffd735;
    margin: 0 auto;
}
.floating:after {
    content: "";
    display: block;
    position: absolute;
    bottom: -30px;
    left: 50%;
    height: 8px;
    width: 100%;
    box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.4);
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.2);

    transform: translate(-50%, 0);
    transition: transform 1s;
}

/* Hover States */
.floating:hover {
    transform: translateY(-40px);
    transition: transform 0.5s;
}
.floating:hover:after {
    transform: translate(-50%, 40px) scale(0.75);
    transition: transform 0.5s;
}

/*弹出*/
.popup {
    transform: scale(1);
    box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.3);
    transition: box-shadow 0.5s, transform 0.5s;

    width:100px;
    height:100px;
    background-color: #ffd735;
    margin: 0 auto;
}
.popup:hover {
    transform: scale(1.3);
    box-shadow: 0px 0px 20px 10px rgba(0, 0, 0, 0.3);
    transition: box-shadow 0.5s, transform 0.5s;
}



















